<template>
	<view :style="colorStyle">
		<form @submit="formSubmit">
			<view class='addAddress'>
				<view class='list'>
          <view class='item acea-row row-between-wrapper'>
            <view class='name'>{{$t(`银行选择`)}}</view>
            <picker @change="bindPickerChange" :value="index" :range="array">
              <text :id="yinhang" class='Bank'>{{array[index]}}</text>
              <text class='iconfont icon-qiepian38'></text>
            </picker>
          </view>
          <view class='item acea-row row-between-wrapper'>
            <view class='name'>{{$t(`银行卡类型`)}}</view>
            <view class="xuanze">
              <radio-group @change="changeCardType">
                <label>
                  <radio class="disabled" value="1" :checked="cardType === '1'" /><text>{{$t(`储蓄卡`)}}</text>
                </label>
                <label class="you">
                  <radio value="2" :checked="cardType === '2'" /><text>{{$t(`信用卡`)}}</text>
                </label>
              </radio-group>
            </view>
          </view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>{{$t(`开户名`)}}</view>
						<input type='text' :placeholder='$t(`请输入开户名`)' name='user_name' :value="userBank.user_name"
							placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>{{$t(`预留手机号`)}}</view>
						<input type='number' :placeholder='$t(`请输入预留手机号`)' name="bank_phone" :value='userBank.bank_phone'
							placeholder-class='placeholder' pattern="\d*"></input>
					</view>
          <view class='item acea-row row-between-wrapper'>
            <view class='name'>{{$t(`银行卡号`)}}</view>
            <input type='number' :placeholder='$t(`请输入银行卡号`)' name="bank_account_number" :value='userBank.bank_account_number'
                   placeholder-class='placeholder' pattern="\d*"></input>
          </view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>{{$t(`身份证号`)}}</view>
						<input type='text' :placeholder='$t(`请填写身份证号`)' name='licence_no' placeholder-class='placeholder'
							:value='userBank.licence_no'></input>
					</view>
          <view class='item acea-row row-between-wrapper' v-if="isShow">
            <view class='name'>{{$t(`信用卡有效期`)}}</view>
            <input type='text' :placeholder='$t(`格式为月月年年，如：0116`)' name='valid_day' placeholder-class='placeholder'
                   :value='userBank.valid_day'></input>
          </view>
				</view>
				<view class='default acea-row row-middle' @click='ChangeIsDefault'>
					<checkbox-group>
						<checkbox :checked="userBank.is_default" />{{$t(`设置为默认银行卡`)}}
					</checkbox-group>
				</view>
				<button class='keepBnt bg-color' form-type="submit">{{$t(`立即保存`)}}</button>
			</view>
		</form>
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
		<!-- #ifndef MP -->
		<home></home>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		editBank,
    getBanks,
		getBankDetail
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";

	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import home from '@/components/home';
	import colors from '@/mixins/color.js';
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
			home,
		},
		mixins: [colors],
		data() {
			return {
				orderId: '',
        fromType: 0,
        cardType: '1', //1 储蓄卡 2信用卡
        isShow: false,
				id: 0, //银行卡id
				userBank: {
					is_default: false
				}, //地址详情
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
        index: 0,
        array: [], //支持银行列表
				news: ''
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getUserBank();
					}
				},
				deep: true
			}
		},
		onLoad(options) {
			if (this.isLogin) {
				this.orderId = options.order_id || '';
				this.fromType = options.from_type || '';
				this.id = options.id || 0;
				uni.setNavigationBarTitle({
					title: options.id ? this.$t(`修改银行卡`) : this.$t(`添加银行卡`)
				})
				this.getUserBank();
				this.getBanks();
			} else {
				toLogin();
			}
		},
		methods: {
			initialize() {
			},
      bindPickerChange: function(e) {
        this.index = e.detail.value;
      },
			// 授权回调
			onLoadFun: function() {
        this.getBanks();
				this.getUserBank();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			toggleTab(str) {
				this.$refs[str].show();
			},

			getUserBank: function() {
				if (!this.id) return false;
				let that = this;
				getBankDetail(this.id).then(res => {
					that.$set(that, 'userBank', res.data);
          let userBank = res.data;
          that.$set(that, 'index', userBank.bank_name);
          if(userBank.card_type === '2'){
            that.$set(that, 'cardType', '2');
            that.$set(that, 'isShow', true);
          }
				});
			},

      getBanks: function() {
        let that = this;
        getBanks().then(res => {
          let array = res.data.extractBank;
          array.unshift('请选择银行');
          array.forEach((v, i) => {
            array.splice(i,1,that.$t(v))
          })
          that.$set(that, 'array', array);
        });
      },

      // 选择银行卡类型
      changeCardType(e) {
        this.cardType = e.detail.value;
        this.isShow = !this.isShow;
      },

			/**
			 * 提交用户添加银行卡
			 * 
			 */
			formSubmit: function(e) {
				let that = this,
					value = e.detail.value;
				if (!value.user_name.trim()) return that.$util.Tips({
					title: that.$t(`请填写开户名`)
				});
				if (!value.bank_phone) return that.$util.Tips({
					title: that.$t(`请填写银行预留手机号`)
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.bank_phone)) return that.$util.Tips({
					title: that.$t(`请输入正确的手机号码`)
				});
				if (!value.bank_account_number) return that.$util.Tips({
					title: that.$t(`请填写银行卡号`)
				});
        if (!value.licence_no) return that.$util.Tips({
          title: that.$t(`请填写身份证号`)
        });
        if (that.index === 0) return that.$util.Tips({
          title: that.$t(`请选择银行`)
        });

				value.id = that.id;
				value.is_default = that.userBank.is_default ? 1 : 0;
        value.card_type = that.cardType;
        value.bank_name = that.index;

				uni.showLoading({
					title: that.$t(`保存中`),
					mask: true
				})
				editBank(value).then(res => {
					if (that.id)
						that.$util.Tips({
							title: that.$t(`修改成功`),
							icon: 'success'
						});
					else
						that.$util.Tips({
							title: that.$t(`添加成功`),
							icon: 'success'
						});
					setTimeout(function() {
						if (that.orderId) {
							let orderId = that.orderId;
							let fromType = that.fromType;
							that.orderId = '';
							that.fromType = '';
							uni.navigateTo({
								url: '/pages/goods/cashier/index?order_id=' + orderId + '&from_type=' + fromType
							});
						} else {
							// #ifdef H5
							return history.back();
							// #endif
							// #ifndef H5
							return uni.navigateBack({
								delta: 1,
							})
							// #endif
						}
					}, 1000);
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
			},
			ChangeIsDefault: function(e) {
				this.$set(this.userBank, 'is_default', !this.userBank.is_default);
			}
		}
	}
</script>

<style scoped lang="scss">
	.fontcolor {
		color: var(--view-theme);
	}
  .you {
    margin-left: 25rpx;
  }
  /*
  .xuanze{
    margin-right: 200rpx;
  }*/

	.addAddress .list {
		background-color: #fff;
	}

	.addAddress .list .item {
		padding: 30rpx;
		border-top: 1rpx solid #eee;
	}

	.addAddress .list .item .name {
		width: 195rpx;
		font-size: 30rpx;
		color: #333;
	}

	.addAddress .list .item .address {
		// width: 412rpx;
		flex: 1;
		margin-left: 20rpx;
	}

	.addAddress .list .item input {
		width: 475rpx;
		font-size: 30rpx;
	}

  .addAddress .list .item .xuanze {
    width: 475rpx;
    font-size: 30rpx;
  }

	.addAddress .list .item .placeholder {
		color: #ccc;
	}

	.addAddress .list .item picker {
		width: 475rpx;
	}

	.addAddress .list .item picker .picker {
		width: 410rpx;
		font-size: 30rpx;
	}

	.addAddress .list .item picker .iconfont {
		font-size: 43rpx;
	}

	.addAddress .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}

	.addAddress .default checkbox {
		margin-right: 15rpx;
	}

	.addAddress .keepBnt {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 50rpx auto;
		font-size: 32rpx;
		color: #fff;
	}

	.addAddress .wechatAddress {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: var(--view-theme);
		border: 1px solid var(--view-theme);
	}
</style>
